<template>
  <!--style="display: flex;justify-content:center"-->
  <el-row>
    <el-col :xs="24" :sm="18" :md="12" :lg="12" :xl="12" style="display: flex;justify-content:center;">
      <el-card class="upload-demo__card" shadow="hover" style="display: flex;justify-content:center;margin-top: 100px">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture"
        >
          <i class="el-icon-upload" />
          <el-tooltip class="el_tooltip_carousel_item" effect="light" placement="right" transition="el-zoom-in-center">
            <div slot="content" class="el-upload__tooltip">只能上传jpg/png文件，且不超过500kb</div>
            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          <!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-tooltip>
        </el-upload>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

</script>

<style scoped lang="scss">
.upload-demo__card:hover{
  border: 2px solid #08f;
  -webkit-transform: translateY(-8px);
  transform: translateY(-20px);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
}

.el-upload__tooltip{
  font-weight: 500;
  font-size: 18px;
  font-family: "微软雅黑 Light",serif;
}

.upload-demo .el-upload__text{
  font-size: 18px;
  font-weight: 530;
  font-family: "微软雅黑",serif;
  line-height: 1.7;
  margin-top: 8px;
}
</style>
